<template>
  <div v-if="text" class="omit_block">
    <p ref="setEl1" class="text" :class="{ [className]: !state.isShowMore }">
      {{ text }}
      <span
        v-if="state.isShowMore"
        class="text operation_btn_placeholde"
      ></span>
    </p>

    <p ref="setEl2" class="text text_placeholde">
      {{ text }}
    </p>
    <span
      v-if="state.isShowMoreBtn"
      :class="[
        'text',
        'operation_btn',
        className != 'omit_line1' && isSafari ? 'isSafari' : '',
        state.isShowMore ? 'operation_btn_more' : '',
      ]"
      @click="setIsShowMove"
      >{{ operationBtnText }} <img src="./images/dowicon.png" alt="" />
    </span>
  </div>
</template>
<script name="UnfoldFold" setup>
import { ref, computed, onMounted, watch } from 'vue'
const props = defineProps({
  text: {
    type: String,
    default: '',
  },
  className: {
    //omit_line1 omit_line2 omit_line3
    type: String,
    default: 'omit_line1',
  },
})

const state = ref({
  isShowMoreBtn: false,
  isShowMore: false,
})
let setEl1 = ref(null)
let setEl2 = ref(null)

// 计算属性
const operationBtnText = computed(() => {
  return !state.value.isShowMore ? '展开' : '收起'
})
const setIsShowMove = () => {
  state.value.isShowMore = !state.value.isShowMore
}
const init = () => {
  state.value.isShowMoreBtn =
    setEl1.value &&
    setEl2.value &&
    setEl2.value.offsetHeight > setEl1.value.offsetHeight
}
onMounted(() => {
  watch(
    () => props.text,
    async () => {
      await setTimeout(() => {
        props.text && init()
      }, 0)
    },
    { immediate: true }
  )
})

const isSafari = computed(() => {
  return (
    /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)
  )
})
</script>
<style scoped>
.omit_block {
  position: relative;
  text-align: left;
}

.text_placeholde {
  content: '占位用的，用来判断是否需要显示展开按钮';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  opacity: 0;
  z-index: -100;
}

.operation_btn {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: #fff;
}

.omit_line1 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.omit_line2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.omit_line3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.operation_btn_placeholde {
  content: '我是占位用的, 如果收起按钮遮挡了文字就换行显示';
  display: inline-block;
  background-color: aqua;
  opacity: 0;
}

.operation_btn {
  cursor: pointer;
  color: #206ef2;
  padding-left: 5px;
  display: inline;
  /* line-height: 1 ; */
}
.operation_btn > img {
  width: 12px;
  height: 10px;
  transition: all 0.5s;
  vertical-align: middle;
  margin-left: 2px;
}
.operation_btn.operation_btn_more {
  display: block;
  position: relative;
  text-align: right;
  background-color: transparent;
}
.operation_btn.operation_btn_more > img {
  transform: rotate(180deg);
}
.operation_btn.isSafari {
  line-height: 1;
}
</style>
<style>
.el-table__row:hover .operation_btn {
  background-color: rgba(245, 247, 254, 1);
}
</style>
